<template>
  <div class="tag-select">
    <tag-select-option @click="toggleCheck">全部</tag-select-option>
    <slot></slot>
    <a @click="toggle" v-show="showTrigger" ref="trigger" class="trigger">展开<a-icon style="margin-left: 5px" :type="collapsed ? 'down' : 'up'"/></a>
  </div>
</template>

<script lang="es6">
  const TagSelectOption = load('./TagSelectOption');

  module.exports = {
    name: 'TagSelect',
    Option: TagSelectOption,
    components: {
      TagSelectOption: TagSelectOption
    },
    data () {
      return {
        showTrigger: false,
        collapsed: true,
        screenWidth: document.body.clientWidth,
        checkAll: false
      }
    },
    watch: {
      screenWidth: function () {
        this.showTrigger = this.needTrigger();
      },
      collapsed: function (val) {
        this.$el.style.maxHeight = val ? '39px' : '78px';
      }
    },
    mounted () {
      let _this = this;
      // 此处延迟执行，是为解决mouted未完全完成情况下引发的trigger显示bug
      setTimeout(() => {
        _this.showTrigger = _this.needTrigger();
        _this.$refs.trigger.style.display = _this.showTrigger ? 'inline' : 'none';
      }, 1)
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          _this.screenWidth = window.screenWidth;
        })()
      }
    },
    methods: {
      needTrigger () {
        return this.$el.clientHeight < this.$el.scrollHeight || this.$el.scrollHeight > 39;
      },
      toggle () {
        this.collapsed = !this.collapsed;
      },
      getAllTags () {
        const tagList = this.$children.filter((item) => {
          return item.isTagSelectOption;
        });
        return tagList;
      },
      toggleCheck () {
        this.checkAll = !this.checkAll;
        const tagList = this.getAllTags();
        tagList.forEach((item) => {
          item.checked = this.checkAll;
        });
      }
    }
  };
</script>

<style scoped>
  .tag-select{
    user-select: none;
    position: relative;
    overflow: hidden;
    max-height: 39px;
    padding-right: 50px;
    display: inline-block;
  }
  .trigger{
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
